<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<div class="living_hot_properties">
	<div class="container">
		<div class="row">
			<div class="col-lg-12 living_col">
				<div class="panel living_panel_bottom_top">
					<div class="panel-body living_panel_bottom_top">
						<div class="col-md-12 living-padding-lr">
							<c:if test="${not empty listCavas}">
			          			<!-- carousel -->
			            		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			            			<!-- Indicators -->
								  	<ol class="carousel-indicators">
							  			<c:forEach items="${listCavas }" varStatus="countIndicator">
											<li data-target="#myCarousel" data-slide-to="${countIndicator.count -1}" class=""></li>	    
										</c:forEach>
								  	</ol>
								  	<div class="carousel-inner">
								  			<c:forEach var="property" items="${listCavas }" varStatus="counter">
								  				<c:choose>
								  					<c:when test="${counter.count == 1}">
												    	<div class="item active">
												    	  <a href="productDetail?aId=${property.id}&type=${property.type}">
														  		<img alt="${property.name}" src="<c:url value="${property.url}"/>" class="img-responsive living_image_hot_properties">
														  </a>
														  <div class="container">
																<div class="carousel-caption">
															  		<h4>${property.name}</h4>
																</div>
														  </div>
														</div>
													</c:when>
													<c:otherwise>
														<div class="item">
															<a href="productDetail?aId=${property.id}&type=${property.type}">
														  		<img alt="${property.name}" src="<c:url value="${property.url}"/>" class="img-responsive living_image_hot_properties">
														  	</a>
														  	<div class="container">
																<div class="carousel-caption">
																  	<h4>${property.name}</h4>
																</div>
														  	</div>
														</div>
													</c:otherwise>
											    </c:choose>
											</c:forEach>
									  </div>
									  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
					  				  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			            		</div>
								<!-- /carousel -->
							</c:if>
							<c:if test="${not empty listImages}">
			          			<!-- carousel -->
			            		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			            			<!-- Indicators -->
								  	<ol class="carousel-indicators">
							  			<c:forEach items="${listImages }" varStatus="countIndicator">
											<li data-target="#myCarousel" data-slide-to="${countIndicator.count -1}" class=""></li>	    
										</c:forEach>
								  	</ol>
								  	<div class="carousel-inner">
								  			<c:forEach var="property" items="${listImages }" varStatus="counter">
								  				<c:choose>
								  					<c:when test="${counter.count == 1}">
												    	<div class="item active">
												    	  <a href="#">
														  		<img alt="${property.name}" src="<c:url value="${property.url}"/>" class="img-responsive living_image_hot_properties">
														  </a>
														  <div class="container">
																<div class="carousel-caption">
															  		<h4>property.name</h4>
																</div>
														  </div>
														</div>
													</c:when>
													<c:otherwise>
														<div class="item">
															<a href="#">
														  		<img alt="${property.name}" src="<c:url value="${property.url}"/>" class="img-responsive living_image_hot_properties">
														  	</a>
														  	<div class="container">
																<div class="carousel-caption">
																  	<h4>property.name</h4>
																</div>
														  	</div>
														</div>
													</c:otherwise>
											    </c:choose>
											</c:forEach>
									  </div>
									  <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
					  				  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			            		</div>
								<!-- /carousel -->
							</c:if>
						</div>
					</div>
				</div>
			</div>	
		</div>
	</div>
</div>
